<style>
    #sidebarWrap img{
        width: 100%;
    }
</style>
<!-- 侧滑栏的父层, -->
<div id="sidebarWrap" class="wrap">
    <!-- 顶部 -->
    <div class="swipedown" data-moving="325"><img src="images/placeholder-app.jpg" alt="占位图"></div>
    <!-- 底部 -->
    <div class="swipeup" data-moving="516"><img src="images/placeholder-keyboard.jpg" alt="占位图"></div>
    <!-- 侧滑菜单 -->
    <div class="swipeleft" data-moving="644">
        <img src="images/placeholder-filter.jpg" alt="占位图">
    </div>
    <div class="swiperight" data-moving="644">
        
        <img src="images/placeholder-sidebar.jpg" alt="占位图">
    </div>
    <!-- 正文内容 -->
    <div id="swipePage" class="bui-page" style="background:#ff3300;">
        <header class="bui-bar">
            <div class="bui-bar-left">
            <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
            </div>
            <div class="bui-bar-main">复杂交互场景</div>
            <div class="bui-bar-right">
            </div>
        </header>
        <main>
            <!-- 焦点图结构 -->
            <div id="slide" class="bui-slide">
                <div id="slidemain" class="bui-slide-main">
                    <ul>
                        <li>
                            <img src="images/banner01.png" alt="">
                        </li>
                        <li>
                            <img src="images/banner02.png" alt="">
                        </li>
                        <li>
                            <img src="images/banner03.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bui-tips">
                小提示: 该例子可以在手机中拖动
            </div>  
            <!-- 侧滑列表控件 -->
            <ul id="uiListview" class="bui-listview">
                <li status="1">
                    <div class="bui-btn bui-box">
                        <div class="span1">左滑右滑都触发自己,不能触发父级</div>
                        <i class="icon-listright"></i>
                    </div>
                    <div class="bui-listview-menu swipeleft" data-moving="200">
                        <div class="bui-btn primary">置顶</div>
                        <div class="bui-btn danger">删除</div>
                    </div>
                    <div class="bui-listview-menu swiperight" data-moving="100">
                        <div class="bui-btn primary">置顶</div>
                    </div>
                </li>
                <li status="1">
                    <div class="bui-btn bui-box">
                        <div class="span1">左滑触发自己,右滑触发父级</div>
                        <i class="icon-listright"></i>
                    </div>
                    <div class="bui-listview-menu swipeleft" data-moving="100">
                        <div class="bui-btn danger">删除</div>
                    </div>
                </li>
            </ul>
            <p class="bui-box-center">
                <img src="images/swipeall.png" alt="占位图" style="width:2rem">
            </p>
             <div class="placeholder-text">
                    <h3>上下左右滑动,并且控件与控件之间不会相互干扰</h3>
                    <p class="warning-reverse">(提示：该事件请在手机操作！)</p>
                </div>
         </main>
        
    </div>
</div>